<script setup>


import axios from "axios";
import {ref} from "vue";
import {ElMessage} from "element-plus";
let dto=ref({})
let tableData=ref([])
let total=ref()
let activityList=()=>{
  axios.post("/api/activity/activity/list",dto.value).then(
      res=>{
        tableData.value=res.data.data.list;
        total.value=res.data.data.total;
      }
  )
}
activityList()
let handleSizeChange=()=>{
  dto.value.pageNum=1;
  activityList()
}
let handleCurrentChange=()=>{
  activityList()
}
let sou=()=>{
  activityList()
}

let dialogVisible=ref(false)
let kan=ref({})
let handleEdit=(row)=>{
  dialogVisible.value=true
  kan.value=row
}

let productList=ref([])
axios.get("/api/activity/activity/productList").then(
    res=>{
      if (res.data.code===200){
        productList.value=res.data.data
      }
    }
)

let dialogVisibleAdd=ref(false)
let activityAdd=ref({})
let add=()=>{
  axios.post("/api/activity/activity/activityAdd",activityAdd.value).then(
      res=>{
        if (res.data.code===200){
          ElMessage.success("添加拼团活动成功")
          dialogVisibleAdd.value=false
        }else {
          ElMessage.error(res.data.msg)
        }
      }
  )
}

let faTuan=()=>{
  axios.get("/api/activity/activity/activityFaTuan/"+kan.value.id).then(
      res=>{
        if (res.data.code===200){
          ElMessage.success("已开团")
          dialogVisible.value=false
        }else {
          ElMessage.error(res.data.msg)
        }
      }
  )
}

let canTuan=()=>{
  axios.get("/api/activity/activity/activityCanTuan/"+kan.value.id).then(
      res=>{
        if (res.data.code===200){
          ElMessage.success("已参加")
          dialogVisible.value=false
        }else {
          ElMessage.error(res.data.msg)
        }
      }
  )
}
</script>

<template>
  活动标题：<el-input v-model="dto.title"></el-input>
  <el-button type="success" @click="sou">搜索</el-button>

  <el-button type="primary" @click="dialogVisibleAdd=true">添加拼团活动</el-button>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="ID" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="活动标题" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.title }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="拼团价格" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.groupPrice }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="开始时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.startTime }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="结束时间" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="状态" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px" v-if="scope.row.status===0">未开始</span>
          <span style="margin-left: 10px" v-if="scope.row.status===1">进行中</span>
          <span style="margin-left: 10px" v-if="scope.row.status===2">已结束</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row)">
          马上拼
        </el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  =======================分页================-->
  <el-pagination
      v-model:current-page="dto.pageNum"
      v-model:page-size="dto.pageSize"
      :page-sizes="[5, 10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />


  <el-dialog
      v-model="dialogVisible"
      title="拼团详情"
      width="75%"
  >
活动标题：<span style="margin-left: 10px">{{kan.title }}</span><br>
拼团价格：<span style="margin-left: 10px">{{kan.groupPrice }}</span><br>
开始时间：<span style="margin-left: 10px">{{kan.startTime }}</span><br>
结束时间：<span style="margin-left: 10px">{{kan.endTime }}</span><br>
商品名称：<span style="margin-left: 10px">{{kan.name }}</span><br>
商品原价：<span style="margin-left: 10px">{{kan.originalPrice }}</span><br>
商品描述：<span style="margin-left: 10px">{{kan.description }}</span><br>
商品详情：<span style="margin-left: 10px">{{kan.detail }}</span><br>
分类：<span style="margin-left: 10px" v-if="kan.categoryId===1">电子产品</span>
<span style="margin-left: 10px" v-if="kan.categoryId===2">家用</span>
<span style="margin-left: 10px" v-if="kan.categoryId===3">工具</span>
<span style="margin-left: 10px" v-if="kan.categoryId===4">科技</span>

    <el-button type="primary" @click="faTuan">发起拼团</el-button>
    <el-button type="primary" @click="canTuan">参团</el-button>
  </el-dialog>


  <el-dialog
      v-model="dialogVisibleAdd"
      title="添加拼团活动"
      width="75%"
  >
活动标题：<el-input v-model="activityAdd.title"></el-input>
拼团价格：<el-input v-model="activityAdd.groupPrice"></el-input>
成团人数：<el-input v-model="activityAdd.groupSize"></el-input>
活动库存：<el-input v-model="activityAdd.stock"></el-input>
每人限购数量：<el-input v-model="activityAdd.limitPerUser"></el-input>
商品名称： <el-select v-model="activityAdd.productId" placeholder="Select" style="width: 240px">
         <el-option
        v-for="item in productList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
    />
  </el-select>
    <el-button type="primary" @click="add">添加拼团活动</el-button>
  </el-dialog>

</template>

<style scoped>

</style>